<template>
  <f7-block>
    <list :targetUrl="targetUrl">
      <f7-list-item slot="listItem"
                    slot-scope="item"
                    swipeout
                    link="#"
                    :key="item.data.id"
                    :title="item.data.name"
                    :subtitle="item.data.loginName"
                    :text="item.data.workGroup">
        <img slot="media" :src="item.data.icon||'/static/images/default_user.png'" width="40"/>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="view(item.data)">详情</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="edit(item.data)">编辑</f7-swipeout-button>
          <f7-swipeout-button color="red" @click="del(item.data)">删除</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </list>
    <component ref="bizPopup"
               :is="whichBizPopup"
               :formModel="formModel"
               :inputFields="inputFields"
               :targetUrl="targetUrl"
               @popupIsOpened="popupIsOpened"/>
  </f7-block>
</template>
<script type="text/ecmascript-6">
  import List from '@/components/list'
  import BasePopup from '@/components/BasePopup'
  import formModel from './model'
  import {userURL} from '../../config.toml'

  export default {
    name: 'kalix-admin-user',
    data() {
      return {
        targetUrl: userURL,
        formModel,
        inputFields: [
          {
            label: '用户类型',
            type: 'picker',
            placeholder: '请输用户类型',
            prop: 'userType',
          },
          {
            label: '登录名',
            type: 'text',
            placeholder: '请输入登录名',
            prop: 'loginName',
          },
          {
            label: '姓名',
            type: 'text',
            placeholder: '请输入姓名',
            prop: 'name',
          }
        ],
        whichBizPopup: null
      }
    },
    components: {
      List,
      BasePopup
    },
    methods: {
      view(item) {
        this.whichBizPopup = 'BasePopup'
        this.$nextTick(() => {
          this.$refs.bizPopup.open('view', item)
        })
      },
      edit(item) {
        this.whichBizPopup = 'BasePopup'
        this.$nextTick(() => {
          this.$refs.bizPopup.open('edit', item, true)
        })
      },
      del() {
      },
      popupIsOpened() {
        this.whichBizPopup = ''
      }
    }
  }
</script>
<style scoped lang="stylus" type="text/stylus">
</style>
